{% extends "gt_photo.html" %}

{% load image_resize %}

{% block title %}{{ photo.name }}{% endblock %}

{% block head %}
    <style type="text/css"> 
        html {background-color: #50555F;}
        body {overflow: hidden; margin: 0; padding: 0px;}
        body > div > div {overflow: hidden; height: {{ photo.image|750h }}px; width: {{ photo.image|750w }}px; margin: auto; padding: 0; position: relative;}
        img {height: {{ photo.image|750h }}px; width: {{ photo.image|750w }}px; margin: 0;}
        h2 {color: #FFF; text-align: center; margin-top: 5px;}
        .ULPhotoCorner, .URPhotoCorner, .LLPhotoCorner, .LRPhotoCorner {position: absolute; width: 8px; height: 8px; z-index: 5;}
        .ULPhotoCorner {top: 0px; left: 0px; background-image: url(http://groundtruthtrekking.org/WildResource/Style/Graphics/ULPhotoCorner.png);}
        .URPhotoCorner {top: 0px; right: 0px; background-image: url(http://groundtruthtrekking.org/WildResource/Style/Graphics/URPhotoCorner.png);}
        .LLPhotoCorner {bottom: 0px; left: 0px; background-image: url(http://groundtruthtrekking.org/WildResource/Style/Graphics/LLPhotoCorner.png);}
        .LRPhotoCorner {bottom: 0px; right: 0px; background-image: url(http://groundtruthtrekking.org/WildResource/Style/Graphics/LRPhotoCorner.png);}
    </style> 
{% endblock %}

{% block content %}
    <div>
        <div>
            <img src="{{ photo.image|750 }}" alt="{{ photo.name }}" />
            <div class="ULPhotoCorner"></div><div class="URPhotoCorner"></div><div class="LLPhotoCorner"></div><div class="LRPhotoCorner"></div>
        </div>
        <h2>{{ photo.name }}</h2>
    </div>
{% endblock %}
